<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<title>选座购票</title>
<!-- for-mobile-apps -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="keywords" content="Movie Ticket Booking Widget Responsive, Login form web template, Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<!-- //for-mobile-apps -->
<link href='//fonts.googleapis.com/css?family=Kotta+One' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<link href="css/seat.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery-3.7.1.js"></script>
<script src="js/jquery.seat-charts.js"></script>
</head>
<style>

	
</style>
<body>
<div class="content">
	<h1>${mes }</h1>
	<div class="main">
	
		<h2>1号厅</h2>

		<div class="demo">
			<div id="seat-map">
				<div class="front">屏幕</div>					
			</div>
			<div class="booking-details">
				<ul class="book-left">
					<li>电影:</li>
					<li>时间:</li>
					<li>票数:</li>
					<li>总价:</li>
					<li>座位:</li>
				</ul>
				<ul class="book-right">
					<li id="moviename">${sessionScope.li.get(0) }</li>
					<li id="fTimg">${sessionScope.li.get(2) }</li>
					<li><span id="counter">0</span></li>
					<li><b><i>￥</i><span id="total">0</span></b></li>
				</ul>
				<div class="clear"></div>
				<ul id="selected-seats" class="scrollbar scrollbar1"></ul>
				
					<a  href="" class="checkout-button">购买</a>
						<a  href="OrderServlet" class="checkout-button">查看订单</a>
						<a  href="MovieFirstServlet" class="checkout-button">返回</a>
				<div id="legend"></div>
			</div>
			<div style="clear:both"></div>
	    </div>

			<script type="text/javascript">
				var price = ${li.get(1)}; //price
				$(document).ready(function() {
					var $cart = $('#selected-seats'), //Sitting Area
					$counter = $('#counter'), //Votes
					$total = $('#total'); //Total money
					
					var sc = $('#seat-map').seatCharts({
						map: [  //Seating chart
							'aaaaaaaaaa',
							'aaaaaaaaaa',
							'__________',
							'aaaaaaaa__',
							'aaaaaaaaaa',
							'aaaaaaaaaa',
							'aaaaaaaaaa',
							'aaaaaaaaaa',
							'aaaaaaaaaa',
							'__aaaaaa__'
						],
						naming : {
							top : false,
							getLabel : function (character, row, column) {
								return column;
							}
						},
						legend : { //Definition legend
							node : $('#legend'),
							items : [
								[ 'a', 'available',   '未售出' ],
								[ 'a', 'unavailable', '已售出'],
								[ 'a', 'selected', '已选择']
							]					
						},
						click: function () { //Click event
							var r='';
							var l='';
							if((this.settings.row+1)<10){
								r="0"+(this.settings.row+1);
							}else{
								r=this.settings.row+1;
							}
							if((this.settings.label)<10){
								l="0"+(this.settings.label);
							}else{
								l=this.settings.label;
							}
							if (this.status() == 'available') { //optional seat
								$('<li>'+(r)+' 排'+l+'座</li>')
									.attr('class', 'cart-item')
									.data('seatId', this.settings.id)
									
									.appendTo($cart);

								$counter.text(sc.find('selected').length+1);
								$total.text(recalculateTotal(sc)+price);
											
								return 'selected';
							} else if (this.status() == 'selected') { //Checked
									//Update Number
									$counter.text(sc.find('selected').length-1);
									//update totalnum
									$total.text(recalculateTotal(sc)-price);
										
									//Delete reservation
									$('#cart-item-'+this.settings.id).remove();
									//optional
									return 'available';
							} else if (this.status() == 'unavailable') { //sold
								return 'unavailable';
							} else {
								return this.style();
							}
						}
					});
					
					$().ready(function(){
						
						$.ajax({
							type:"post",
							url:"SeatServlet",
							dataType:"json",
							success:function(data){
								//for(var i=0;i<data.length;i++){
									//alert(data[i])
									//sc.get(data[i]).status('unavailable');
								//}
								
								
								sc.get(data).status('unavailable');
							}
						})
					})
					//sold seat
					
						
				});
				//sum total money
				function recalculateTotal(sc) {
					var total = 0;
					sc.find('selected').each(function () {
						total += price;
					});
							
					return total;
				}
			</script>
	</div>
	<p class="copy_rights">&copy; 2016 Movie Ticket Booking Widget. All Rights Reserved | Design by  <a href="http://w3layouts.com/" target="_blank"> W3layouts</a></p>
</div>
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
</body>
<script type="text/javascript">

function generateOrderNumbers(count) {
    // 检查输入是否为有效的正整数
    if (!Number.isInteger(count) || count <= 0) {
        throw new Error('Count must be a positive integer');
    }

    // 用来存储生成的订单号的数组
    const orderNumbers = [];

    // 生成指定数量的订单号并存储到数组中
    for (let i = 0; i < count; i++) {
        const orderNumber = generateOrderNumber();
        orderNumbers.push(orderNumber);
    }

    return orderNumbers;
}
function generateOrderNumber() {
    const length = 10;
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    let orderNumber = '';

    for (let i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * characters.length);
        orderNumber += characters[randomIndex];
    }

    return orderNumber;
}
	$(".checkout-button:first").click(function(){
		//var a=document.querySelectorAll(".cart-item").innerText;
		//console.log(a);
		var a="";
		$(".cart-item").each(function(){
			var z=$(this).html();
			a=a+z;
			
		})
	
		var time=new Date();
		var year=time.getFullYear();
		var month=time.getMonth()+1;
		var day=time.getDate();
		var hours=time.getHours();
		var min=time.getMinutes();
		var sec=time.getSeconds();
		var o=year+"/"+month+"/"+day+"/"+hours+":"+min+":"+sec;
		
		var o1=year+month+day+hours+min+sec;
	
		var b=$("#moviename").html();
		var c=$("#counter").html();
		c = parseInt(c, 10);
		const count=c;
		var v=generateOrderNumbers(count);

		var d=$("#total").html();
		var t=$("#fTimg").html();
		var url="SeatServlet?seat="+a+"&num="+c+"&moviename="+b+"&priceAll="+d+"&time="+o+"&t="+v+"&time1="+t;
		
		$(".checkout-button:first").attr("href",url);

	});	


</script>
</html>
